<template>
    <div class="sourceDetails">
        <el-card>
            <el-form ref="form" :rules="rules" :model="formData" label-width="100px">
                <el-form-item label="报名渠道" prop="name">
                    <el-input v-model="formData.name" style="max-width: 260px" placeholder="请填写报名渠道"></el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <el-color-picker v-model="formData.color"></el-color-picker>
                </el-form-item>
                
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="formData.sort" style="max-width: 260px" placeholder="请填写排序"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {changeTitleMinin} from '@/mixin';
import http from '@/api/source'
export default {
    name: 'sourceDetails',
    mixins: [changeTitleMinin],
    data() {
        return {
            formData: {
                status: true
            },
            is_add: true,
            rules: {
                name: [
                    { required: true, message: '请填写报名渠道' }
                ],
                color: [
                    { required: true, message: '请填写颜色值' }
                ],
                status: [
                    { required: true, message: '请选择状态' }
                ],
                sort: [
                    { required: true, message: '请填写序号值' }
                ],
            },
        }
    },
    methods: {
        onSubmit(){
            console.log('this.formData:',this.formData);
            this.$refs['form'].validate((valid) => {
                if(valid){
                    let formData = JSON.parse(JSON.stringify(this.formData));
                    if(this.is_add){
                        formData.center_id = JSON.parse(sessionStorage.getItem('user')).center_id;
                        http.createContent(formData).then(res => {
                            this.$message.success(res.msg || '新增成功！');
                            this.$router.push({name: 'sourceManage'});
                        })
                    }else{
                        http.editContent(formData).then(res => {
                            this.$message.success(res.msg || '编辑成功！');
                            this.$router.push({name: 'sourceManage'});
                        })
                    }
                }
            })
        },
        getContentDetail(id){
            http.getContentDetail({id}).then(res => {
                this.formData = res.data;
            })
        },
        getPageParams(){
            if(Object.keys(this.$route.params).length){
                sessionStorage.setItem('sourceDetailsParams',JSON.stringify(this.$route.params))
            }

            let pageParams = sessionStorage.getItem('sourceDetailsParams');
            if(pageParams){
                pageParams = JSON.parse(pageParams);
                this.is_add = pageParams.pageType=='create'?true:false;

                if(pageParams.id){
                    this.getContentDetail(pageParams.id);
                }
            }
        }
    },
    created(){
        this.getPageParams();
    }
}
</script>

<style lang="scss" scoped>
.sourceDetails{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
}
</style>